<template>
	<view class="i-page" :style="{background: bgColor}">
		<view class="i-navBar" :style="{background: navBgColor, paddingTop: navBarHeight + 'px'}">
			<view class="bar">
				<view class="back" v-if="back" @click="navTo('', 'navigateBack')">
  					<image src="../../static/images/back_icon.png" mode=""></image>
				</view>
				<text class="title" :style="{color}">{{title}}</text>
				<text class="r_title" :style="{color}" @click="handleClick">{{r_title}}</text>
			</view>
		</view>
		<view class="body" :style="{paddingTop: navBarHeight + 44 + 'px'}">
			<slot></slot>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		navTo,
		getSystemInfoSync
	} from '../../utils/common'
	import {defineProps, defineEmits, ref} from 'vue'
	
	
	const props  = defineProps({
		navBgColor: {
			type: String,
			default: '#fff'
		},
		color: {
			type: String,
			default: '#16161F'
		},
		back: {
			type: Boolean,
			default: true
		},
		title: {
			type: String,
			default: ''
		},
		r_title: {
			type: String,
			default: ''
		},
		wxTop: {
			type: Boolean,
			default: false
		},
		bgColor: {
			type: String,
			default: 'fff'
		}
	})
	
	const navBarHeight = ref(0)
	const {statusBarHeight } = getSystemInfoSync()
	navBarHeight.value = statusBarHeight
	// #ifdef  MP-WEIXIN
	
	const {height} = wx.getMenuButtonBoundingClientRect()
	navBarHeight.value = statusBarHeight + (props.wxTop ? height : 0)
	console.log(height, 'heightheight');
	// #endif
	
	
	const emit = defineEmits(['click'])
	const handleClick = () => {
		emit('click')
	}
	
	
</script>

<style lang="scss" scoped>
	.i-page {
		width: 100%;
		min-height: 100vh;
		.i-navBar {
			position: fixed;
			width: 100%;
			z-index: 100;
			height: 44px;
		
			.bar {
				height: 44px;
				@include flexRS;
				width: calc(100% - 48rpx);
				margin: 0 auto;
				position: relative;
				.back {
					width: 48rpx;
					height: 48rpx;
					image {
						width: 48rpx;
						height: 48rpx;
					}
				}
			}
		
			.title {
				@include dfont(32rpx);
				font-weight: 500;
				width: 180rpx;
				text-align: center;
				position: absolute;
				left: calc(50% - 90rpx);
				overflow: hidden;
			}
		
			.r_title {
				@include titlefont(26rpx);
				text-align: right;
			}
		}
	}

</style>
